<template>
    <div>
        <Editor :id="commpEditorId" :ref="commpEditorId" v-model="content" :init="config"></Editor>
    </div>
</template>
<script>
import tinymce from "tinymce";

import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";

import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/contextmenu";

import "tinymce/plugins/codesample";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/media";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/paste";
import "tinymce/skins/ui/oxide/skin.css";
import Editor from "@tinymce/tinymce-vue";
export default {
    
    name:'commpEditor',
    components:{
        
    },
    model: {//在父组件可以用自定义组件的v-model获取值
        prop: "value",
        event: "contentChange"
    },
    props:{
        value:{
            type: String,
            default: undefined,
            required: false,
        },
        commpEditorId:{
            type:String,
            default: 'commpEditorUndefinedId',
            required: false,
        },
        height:{
            type:Number,
            default: 200,
            required: false,
        },
    },
    data(){
        return{
            content:'',
            config:{
                selector: "#" + this.commpEditorId, //富文本编辑器的id
                language: "zh_CN", //语言
                language_url: "/plugin/tinymce/zh_CN.js", //语言包
                //   skin_url: '/plugin/skins/ui/oxide', //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
                menubar: true, //菜单条
                plugins:
                    "link lists image code table colorpicker textcolor wordcount contextmenu  media table fullscreen preview pagebreak insertdatetime hr paste", //插件
                toolbar:
                    "bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak | code fullscreen preview", //工具条
                font_formats:
                    "Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=微软雅黑; Impact=impact,chicago;", //字体
                fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小
                height: this.height, //高度
                branding: false, //水印
                elementpath: false, //底部元素路径
                paste_data_images: true, //允许粘贴图片
                video_template_callback: (data) => {
                    //视频设置回调
                    return `<video width="
                                ${data.width} " height="${data.height}"
                                ${data.poster ? 'poster="' + data.poster + '"' : ""}
                                controls="controls">
                                <source src="${data.source}"/>
                            </video>`;
                },
                // 图片本地上传方法  点击上传后执行的事件
                images_upload_handler: (blobInfo, success, failure) => {
                    // const img = "data:image/jpeg;base64," + blobInfo.base64();  // 如果以 string 方式提交上传图片，请使用此参数
                    // let formdata = new FormData(); 
                    // formdata.append("file", blobInfo.blob());
                    // ServUploadImg(formdata).then((res) => {
                    // success(res.data[0]);
                    // });  
                
                },
            }
        }
    },
    watch:{
        value:{
            handler (newval, oldVal) {
                this.content = newval
            }
        }
    },
    mounted(){
        tinymce.init(this.config)
    },
    methods:{
        contentChange(){
            //console.log('富区文本框')
        }
    }
}
</script>